<!-- 执法管理 -->
<template>
  <div class="law">
    <a-tabs
      default-active-key="1"
      @change="callback"
    >
      <a-tab-pane
        key="1"
        tab="专利"
      >
        <List
          @clickDetail="clickDetail"
          applicableType="1"
        ></List>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="商标"
        force-render
      >
        <List
          @clickDetail="clickDetail"
          applicableType="2"
        ></List>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      width="1000px"
      title="详情"
      :visible="visible"
      :footer="null"
      @cancel="visible = false"
    >
      <div class="section">
        <a-row
          type="flex"
          justify="space-between"
        >
          <a-col :span='18'>
            <h3 class="title">{{title}}</h3>
          </a-col>
          <a-col :span='6'>
            <a-input-search
              placeholder="≤25位字符"
              enter-button="搜索"
              @search="onSearch"
              v-model="value"
            />
          </a-col>
        </a-row>
        <a-row class="m-t-18">
          <a-col :span='4'>
            <div class="left">
              <div class="directory">目录</div>
              <div
                v-for="(item,i) in lawChapterList"
                :key="i"
                :class="{'selected':current == i}"
                @click="selectChapter(i,item)"
                class="directory-item"
              >
                <span v-if="$filters.textWidth(item.title) > 128">
                  <a-tooltip
                    placement="top"
                    :title="item.title"
                  >
                    <span>{{item.title}}</span>
                  </a-tooltip>
                </span>
                <span v-else>{{item.title}}</span>
              </div>
            </div>
          </a-col>
          <a-col :span='20'>
            <div class="right">
              <h4 style="text-align: center;">{{chapterName}}</h4>
              <div class="content">
                <div
                  class="m-b-10 "
                  v-html="content"
                  v-for="(content,i) in newContent"
                  :key="i"
                ></div>
              </div>
            </div>
          </a-col>
        </a-row>

      </div>
    </a-modal>
  </div>
</template>

<script>
import List from './list'
export default {
  name: 'Law',
  data () {
    return {
      visible: false,
      oldContent: '',
      lawChapterList: [],  //章节数组
      title: '',  //文章名称
      chapterName: '',  //章节名称
      content: '',
      current: 0,
      value: ''
    };
  },
  mounted () {
  },
  computed: {
    newContent () {
      let content = this.content.split('\n').filter(v => v)
      // console.log(content);
      return content
    }
  },
  components: {
    List
  },
  methods: {
    //tabs切换
    callback () { },
    //查看章节详情
    clickDetail (id, title) {
      console.log(id);
      this.title = title
      this.visible = true
      this.$axios({
        url: 'law/chapter/list',
        method: 'get',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          id: id
        }
      }).then(res => {
        this.lawChapterList = res.data.lawChapterList
        if (this.lawChapterList.length === 0) {
          this.chapterName = ''
          this.content = ''
        } else {
          this.chapterName = this.lawChapterList[0].title
          this.content = this.lawChapterList[0].content
        }
        this.oldContent = this.content
      })
    },
    selectChapter (i, item) {
      this.current = i;
      this.chapterName = item.title
      this.content = item.content
      this.oldContent = item.content
      this.onSearch(this.value)
    },
    onSearch (value) {
      const reg = new RegExp(value, 'g')
      let oldContent = this.oldContent
      this.content = oldContent.replace(reg, `<span style='color:red;'>${value}</span>`)
    },

  },
  watch: {
    value (value) {
      if (!value) return this.content = this.oldContent
      this.onSearch(value)
    }
  }
}

</script>
<style scoped lang='less'>
.law {
  height: 100%;
  /deep/.ant-tabs {
    height: 100%;
    .ant-tabs-content {
      height: calc(100% - 44px);
    }
  }
}
/deep/.ant-modal-body {
  .title {
    display: flex;
    align-items: center;
    height: 32px;
  }
  .left {
    height: 460px;
    border: 1px solid rgb(217, 217, 217);
    overflow-y: auto;
    .directory {
      background: rgb(244, 244, 244);
      height: 38px;
      text-align: center;
      line-height: 38px;
      border-bottom: 1px solid rgb(217, 217, 217);
    }
    .directory-item {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      padding-left: 20px;
      height: 38px;
      line-height: 38px;
      border-bottom: 1px solid rgb(217, 217, 217);
      cursor: pointer;
      &.selected {
        color: #1890ff;
      }
    }
  }
  .right {
    height: 460px;
    border-bottom: 1px solid rgb(217, 217, 217);
    border-right: 1px solid rgb(217, 217, 217);
    border-top: 1px solid rgb(217, 217, 217);
    overflow-y: auto;
    padding: 10px 20px;
    .content {
      .first {
        text-indent: 35px;
      }
    }
  }
}
</style>